<template>
    <div class="flexbox com_box height_100">
        <PlayVideo />
        <AddMtVideo />
        <AddCaShen />
        <SetHeader @getHeaderData="getTableHeader" ref="headRef" />
        <ViewDamaInfo />
        <AddMaterialTag :taglist="tag_list" ref="addTag" />
        <MaterialVersion ref="versionRef" @getVersion="getVersion" />
        <ViewAnalysis />
        <div class="person_left">
            <div class="flexbox flexcolumn height_100">
                <div class="person_header">
                    <ul class="per_tab flexbox">
                        <li :class="{active:currActive==1}" @click="changeCatalogue(1)">千川</li>
                        <li :class="{active:currActive==2}" @click="changeCatalogue(2)">UD</li>
                        <li :class="{active:currActive==3}" @click="changeCatalogue(3)">巨量</li>
                        <li :class="{active:currActive==4}" @click="changeCatalogue(4)">腾讯</li>
                    </ul>
                </div>
                <div class="person_job flex1" v-loading="m_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="person_btn">
                        <el-input placeholder="请输入目录搜索" clearable prefix-icon="el-icon-search" v-model="catalogQuery">
                        </el-input>
                    </div>
                    <el-tree ref="tree" accordion :expand-on-click-node='true' :data="filteredData(catalogQuery,catalogData)" highlight-current :current-node-key="currentNodekey" @node-click="getTreeData" class="part_tree" node-key="id" :default-expanded-keys="isOpen" :props="defaultProps">
                        <div class="flexbox flexcenter flexbetween custom-tree-node" slot-scope="{ node }">
                            <div class="part_left flexbox flexcenter">
                                <img src="../../assets/img/tree_icon.svg" alt="" class="tree_icon" v-if="node.level==1">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" v-else-if="node.level==2">
                                    <path d="M1.99997 4.33333C1.99997 3.8731 2.37307 3.5 2.8333 3.5H7.91666L9.99999 6H17.0833C17.5436 6 17.9167 6.37308 17.9167 6.83333V16.1667C17.9167 16.6269 17.5436 17 17.0833 17H2.8333C2.37307 17 1.99997 16.6269 1.99997 16.1667V4.33333Z" fill="#95A5C9" fill-opacity="0.5" stroke="#95A5C9" stroke-linejoin="round" />
                                    <path d="M16.5 10H3.5" stroke="white" stroke-width="1.6" stroke-linejoin="round" />
                                </svg>
                                <span class="circle_mt" v-else-if="node.level==4"></span>
                                <span class="tree_title">{{node.label}}</span>
                            </div>
                        </div>
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="person_right flexbox flexcolumn">
            <div class="mt_border">
                <div class="mr_header flexbox flexcenter flexbetween">
                    <div class="font_16">素材列表</div>
                    <div class="flexbox flexcenter">
                        <!-- <el-tooltip content="数据统计" placement="top">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="load_btn" @click="toVideoCount">
                                <path d="M12.4533 8C11.3734 8.44779 10.4016 9.10358 9.58776 9.91741C7.98891 11.5163 7 13.7251 7 16.1648C7 21.0444 10.9556 25 15.8352 25C18.2749 25 20.4837 24.0111 22.0826 22.4122C22.8964 21.5984 23.5522 20.6266 24 19.5467" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M16 16H25C25 11.0294 20.9706 7 16 7V16Z" stroke="#616C85" stroke-width="2" stroke-linejoin="round" />
                            </svg>
                        </el-tooltip> -->
                        <el-tooltip content="任务中心" placement="top">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="load_btn" @click="toLoadTask">
                                <path d="M9 10.5C9 9.94772 9.44772 9.5 10 9.5H22C22.5523 9.5 23 9.94772 23 10.5V24C23 24.5523 22.5523 25 22 25H10C9.44772 25 9 24.5523 9 24V10.5Z" stroke="#616C85" stroke-width="2" stroke-linecap="round" />
                                <path d="M12 8.5C12 7.94772 12.4477 7.5 13 7.5L19 7.5C19.5523 7.5 20 7.94772 20 8.5V10.5C20 11.0523 19.5523 11.5 19 11.5H13C12.4477 11.5 12 11.0523 12 10.5V8.5Z" fill="white" stroke="#616C85" stroke-width="2" stroke-linecap="round" />
                                <path d="M16 15V21M16 21L13.5 19M16 21L18.5 19" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </el-tooltip>
                        <el-button plain size="small" class="plain_blue" @click="downloadFile" :disabled="down_loadding" style="margin-left:20px">
                            <div class="flexbox flexcenter flexjust">
                                <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                导出旧数据
                            </div>
                        </el-button>
                        <el-button plain size="small" class="plain_blue" @click="downloadNewsFile" style="margin-left:12px">
                            <div class="flexbox flexcenter flexjust">
                                <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                导出新数据
                            </div>
                        </el-button>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addMtVedio">上传素材</el-button>
                    </div>
                </div>
                <div class="mt_head flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-radio-group v-model="dataType" @change="getDataList(1)" v-if="queryInfo.channel == 1" size="mini" style="margin-right:12px" class="is_me">
                            <el-radio-button :label="1">新数据</el-radio-button>
                            <el-radio-button :label="0">旧数据</el-radio-button>
                        </el-radio-group>
                        <div class="reset_btn" @click="resetScreen">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                    <div class="flexbox flexcenter">
                        <div class="flexbox flexcenter drop_box">
                            <span class="drop_title">上传时间</span>
                        </div>
                        <div class="icon_btn icon_btn_32" style="margin-left:10px" @click="sortFun('desc')" v-if="queryInfo.order==''|| queryInfo.order=='asc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                        <div class="icon_btn icon_btn_32 rote_180" style="margin-left:10px" @click="sortFun('asc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    </div>
                </div>
                <div class="sch_hight flexbox" v-if="showrank">
                    <div class="flexbox flexcenter max_width">
                        <template v-if="addrank[0].check">
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(0,'duration',1)"></span>
                                    <span class="drop_text">时长</span>
                                    <span class="drop_title">{{duration_text.length>0?duration_text.toString():'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':duration_text.length>0}">已选 {{duration_text.length}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearFilter('duration_text','duration','duration_val')" v-if="duration_text.length>0">清除已选</el-link>
                                    </div>
                                    <el-radio-group v-model="duration_val" class="check_style" @change="changeDuration">
                                        <el-radio :label="item.id" v-for="(item,index) in durationList" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[1].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(1,'reject',2)"></span>
                                    <span class="drop_text">审核状态</span>
                                    <span class="drop_title">{{queryInfo.reject !=''?repeatSinge(cashenList,queryInfo.reject,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.reject !==''}">已选 {{queryInfo.reject !==''?'1':'0'}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('reject',2)" v-if="queryInfo.reject !==''">清除已选</el-link>
                                    </div>
                                    <el-radio-group v-model="queryInfo.reject" class="check_style" @change="getDataList(1)">
                                        <el-radio :label="item.id" v-for="(item,index) in cashenList" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[2].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(2,'size',1)"></span>
                                    <span class="drop_text">尺寸</span>
                                    <span class="drop_title">{{size_text.length>0?size_text.toString():'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':size_text.length>0}">已选 {{size_text.length}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearFilter('size_text','size','size_val')" v-if="size_text.length>0">清除已选</el-link>
                                    </div>
                                    <el-checkbox-group v-model="size_val" class="check_style" @change="selectText()">
                                        <el-checkbox :label="item.id" v-for="item in sizeList" :key='item.id'>
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[3].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(3,'tag',1)"></span>
                                    <span class="drop_text">标签</span>
                                    <span class="drop_title">{{tag_text.length>0?tag_text.toString():'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-input v-model="tagQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':tag_text.length>0}">已选 {{tag_text.length}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearFilter('tag_text','tag')" v-if="tag_text.length>0">清除已选</el-link>
                                    </div>
                                    <el-checkbox-group v-model="queryInfo.tag" class="check_style" @change="selectText2(tag_list,queryInfo.tag,'tag_text','name')">
                                        <el-checkbox :label="item.id" v-for="item in filteredData(tagQuery,tag_list,'name')" :key='item.id'>
                                            <span class="el_check_title">{{item.name}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[4].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(4,'business_scene',1)"></span>
                                    <span class="drop_text">业务场景</span>
                                    <span class="drop_title">{{queryInfo.business_scene.length>0?repeatFind(queryInfo.business_scene,businessList,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.business_scene.length>0}">已选 {{queryInfo.business_scene.length}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('business_scene',1)" v-if="queryInfo.business_scene.length>0">清除已选</el-link>
                                    </div>
                                    <el-checkbox-group v-model="queryInfo.business_scene" class="check_style" @change="getDataList(1)">
                                        <el-checkbox :label="item.id" v-for="item in businessList" :key='item.id'>
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[5].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(5,'area',2)"></span>
                                    <span class="drop_text">归属</span>
                                    <span class="drop_title">{{queryInfo.area!==''?repeatSinge(areaList,queryInfo.area,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.area!==''}">已选 {{queryInfo.area!==''?'1':'0'}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('area',2)" v-if="queryInfo.area!==''">清除已选</el-link>
                                    </div>
                                    <el-radio-group v-model="queryInfo.area" class="check_style" @change="getDataList(1)">
                                        <el-radio :label="item.id" v-for="(item,index) in areaList" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[6].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(6,'editor_uid',1)"></span>
                                    <span class="drop_text">剪辑</span>
                                    <span class="drop_title">{{queryInfo.editor_uid.length>0?repeatFind(queryInfo.editor_uid,roleList,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-input v-model="editQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.editor_uid.length>0}">已选 {{queryInfo.editor_uid.length}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('editor_uid',1)" v-if="queryInfo.editor_uid.length>0">清除已选</el-link>
                                    </div>
                                    <el-checkbox-group v-model="queryInfo.editor_uid" class="check_style" @change="getDataList(1)">
                                        <el-checkbox :label="item.id" v-for="(item,index) in filterRank(editQuery,roleList,'nickname')" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[7].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(7,'photographer_uid',2)"></span>
                                    <span class="drop_text">拍摄</span>
                                    <span class="drop_title">{{queryInfo.photographer_uid!==''?repeatSinge(roleList,queryInfo.photographer_uid,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-input v-model="phoQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.photographer_uid!==''}">已选 {{queryInfo.photographer_uid!==''?'1':'0'}}项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('photographer_uid',2)" v-if="queryInfo.photographer_uid!==''">清除已选</el-link>
                                    </div>
                                    <el-radio-group v-model="queryInfo.photographer_uid" class="check_style" @change="getDataList(1)">
                                        <el-radio :label="item.id" v-for="(item,index) in filterRank(phoQuery,roleList,'nickname')" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[8].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(8,'director_uid',2)"></span>
                                    <span class="drop_text">编导</span>
                                    <span class="drop_title">{{queryInfo.director_uid!==''?repeatSinge(roleList,queryInfo.director_uid,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-input v-model="dirQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.director_uid!==''}">已选 {{queryInfo.director_uid!==''?'1':'0'}}项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('director_uid',2)" v-if="queryInfo.director_uid!==''">清除已选</el-link>
                                    </div>
                                    <el-radio-group v-model="queryInfo.director_uid" class="check_style" @change="getDataList(1)">
                                        <el-radio :label="item.id" v-for="(item,index) in filterRank(dirQuery,roleList,'nickname')" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[9].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(9,'brand_name',2)"></span>
                                    <span class="drop_text">品牌</span>
                                    <span class="drop_title">{{queryInfo.brand_name!==''?queryInfo.brand_name:'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-input v-model="queryInfo.brand_name" @change="getDataList(1)" clearable placeholder="请输入品牌名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[10].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(10,'product_name',2)"></span>
                                    <span class="drop_text">产品</span>
                                    <span class="drop_title">{{queryInfo.product_name!==''?queryInfo.product_name:'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-input v-model="queryInfo.product_name" @change="getDataList(1)" clearable placeholder="请输入产品名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="addrank[11].check">
                            <div class="rank_line"></div>
                            <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                                <div class="flexbox flexcenter drop_box drop_hover">
                                    <span class="close_drop el-icon-error" @click.stop="deletRank(11,'material_type',2)"></span>
                                    <span class="drop_text">来源</span>
                                    <span class="drop_title">{{queryInfo.material_type!==''?repeatSinge(sourceList,queryInfo.material_type,'id','nickname'):'全部'}}</span>
                                    <span class="el-icon-caret-bottom"></span>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <div class="dropdown_hascheck flexbox flexcenter">
                                        <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.material_type!==''}">已选 {{queryInfo.material_type!==''?'1':'0'}} 项</span>
                                        <div class="rank_line" style="margin:0 10px"></div>
                                        <el-link type="primary" :underline="false" @click="clearQuery('material_type',2)" v-if="queryInfo.material_type!==''">清除已选</el-link>
                                    </div>
                                    <el-radio-group v-model="queryInfo.material_type" class="check_style" @change="getDataList(1)">
                                        <el-radio :label="item.id" v-for="(item,index) in sourceList" :key="index">
                                            <span class="el_check_title">{{item.nickname}}</span>
                                            <span class="el-icon-check el_check_icon"></span>
                                        </el-radio>
                                    </el-radio-group>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                        <template v-if="queryInfo.id.length>0">
                            <div class="rank_line"></div>
                            <el-tag type="info" size="small" closable @close="tagClose()">
                                原素材：{{queryInfo.id.toString()}}
                            </el-tag>
                        </template>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">+ 筛选</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <ul class="demand_rank">
                                    <li v-for="(item,index) in addrank" :key="index">
                                        <el-checkbox v-model="item.check" @change="changeRank(item,index)">{{item.name}}</el-checkbox>
                                    </li>
                                </ul>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_02" style="margin-left:5px">素材同步</span>
                        <el-date-picker style="width:216px;margin-left:5px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <span class="font_14 color_02" style="margin-left:12px">数据产生</span>
                        <el-date-picker style="width:216px;margin-left:5px" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="queryInfo.need_date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <el-input style="width:200px;margin-left:12px" clearable size="small" placeholder="素材名称，ID" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="flex over_box source_box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <el-table :data="tableData" class="com_table source_table" :key="tableKey" height="100%" ref="mtTable" @sort-change='sortChange'>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="campaign_name" label="素材" width="375" fixed="left">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <div class="source_video" @click="playVideo(scope.row.material)">
                                    <el-tag effect="dark" size="mini" class="source_tyle" v-if="scope.row.material_type==1">自制</el-tag>
                                    <el-tag effect="dark" size="mini" type="success" class="source_tyle" v-else>外部</el-tag>
                                    <div class="source_cashen flexbox flexjust flexcenter" v-if="scope.row.reject==1">审核<br />不通过</div>
                                    <img :src="scope.row.material+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" class="source_img">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="source_play">
                                        <ellipse opacity="0.4" cx="12" cy="12" rx="12" ry="12" fill="black" />
                                        <path d="M17.6411 11.5965C17.9607 11.8312 17.9607 12.3087 17.6411 12.5434L9.93513 18.2031C9.54719 18.488 9.00003 18.211 9.00003 17.7297L9.00003 6.41022C9.00003 5.92889 9.54719 5.65187 9.93513 5.93679L17.6411 11.5965Z" fill="white" />
                                    </svg>
                                </div>
                                <div class="source_info flex">
                                    <template v-if="scope.row.area==1">
                                        <el-tooltip content="" placement="top">
                                            <div slot="content" class="flexbox flexcenter font_14">
                                                核心创意人：{{scope.row.director_name}}
                                                <span class="mt_line"></span>
                                                拍摄：{{scope.row.photographer_name}}
                                                <span class="mt_line"></span>
                                                剪辑：{{scope.row.editor_name}}
                                            </div>
                                            <div class="source_name">{{scope.row.material_name}}</div>
                                        </el-tooltip>
                                    </template>
                                    <template v-else-if="scope.row.area==2">
                                        <el-tooltip content="" placement="top">
                                            <div slot="content" class="flexbox flexcenter font_14">
                                                编导：{{scope.row.director_name}}
                                                <span class="mt_line"></span>
                                                拍摄：{{scope.row.photographer_name}}
                                                <span class="mt_line"></span>
                                                剪辑：{{scope.row.editor_name}}
                                            </div>
                                            <div class="source_name">{{scope.row.material_name}}</div>
                                        </el-tooltip>
                                    </template>
                                    <div class="source_tag">{{scope.row.tag.length>0?scope.row.tag.map((item=>{return item.name})).join('/'):'暂无标签'}}</div>
                                    <div class="source_text">ID：{{scope.row.material_id==0?'无':scope.row.material_id}}</div>
                                    <div class="source_text">{{scope.row.create_time}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <template v-if="queryInfo.channel==1||queryInfo.channel==3">
                        
                        <el-table-column prop="version_num" label="素材版本" min-width="100">
                            <template slot-scope="scope">
                                <el-button type="info" size="mini" class="parent_num" :disabled="scope.row.version_num==0" @click="materialVersion(scope.row)">{{scope.row.version_num}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stat_cost" label="消耗" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.stat_cost?scope.row.stat_cost:0}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="pay_order_amount" label="GMV" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.pay_order_amount?scope.row.pay_order_amount:0}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="pay_order_roi" label="支付ROI" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.pay_order_roi?scope.row.pay_order_roi:0}}
                            </template>
                        </el-table-column>
                        <template v-for="item in tableHeader">
                            <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                                <template slot-scope="scope">
                                    {{scope.row[item.prop]?scope.row[item.prop]:0}}
                                </template>
                            </el-table-column>
                        </template>
                    </template>

                    <template v-else>
                        <el-table-column prop="stat_cost" label="消耗" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.stat_cost?scope.row.stat_cost:0}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="show_cnt" label="展示" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.show_cnt?scope.row.show_cnt:0}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="click_rate" label="点击率" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.click_rate?scope.row.click_rate:0}}%
                            </template>
                        </el-table-column>
                        <el-table-column prop="pay_order_roi" label="支付ROI" min-width="125" sortable="custom">
                            <template slot-scope="scope">
                                {{scope.row.pay_order_roi?scope.row.pay_order_roi:0}}
                            </template>
                        </el-table-column>
                    </template>

                    <el-table-column prop="" label="操作" width="130" fixed="right">
                        <template slot="header">
                            <div class="flexbox flexcenter flexbetween">
                                操作
                                <svg width="20" class="set_svg" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click="setHeader" v-if="queryInfo.channel==1||queryInfo.channel==3">
                                    <path d="M14.7572 6.68913C15.2262 7.36161 15.5561 8.1382 15.7055 8.97726H17.5V11.0227H15.7055C15.5561 11.8618 15.2262 12.6384 14.7572 13.3109L16.0265 14.5801L14.5801 16.0265L13.3109 14.7572C12.6384 15.2262 11.8618 15.5561 11.0227 15.7055V17.5H8.97726V15.7055C8.1382 15.5561 7.36161 15.2262 6.68913 14.7572L5.41986 16.0265L3.97352 14.5801L5.24275 13.3109C4.77385 12.6384 4.44389 11.8618 4.2945 11.0227H2.5V8.97726H4.2945C4.44389 8.1382 4.77385 7.36161 5.24275 6.68913L3.97352 5.41986L5.41986 3.97352L6.68913 5.24275C7.36161 4.77385 8.1382 4.44389 8.97726 4.2945V2.5H11.0227V4.2945C11.8618 4.44389 12.6384 4.77385 13.3109 5.24275L14.5801 3.97352L16.0265 5.41986L14.7572 6.68913Z" fill="#B4B7BD" stroke="#B4B7BD" stroke-width="1.66667" stroke-linejoin="round" />
                                    <path d="M10 11.6666C10.9205 11.6666 11.6667 10.9204 11.6667 9.99992C11.6667 9.07945 10.9205 8.33325 10 8.33325C9.07957 8.33325 8.33337 9.07945 8.33337 9.99992C8.33337 10.9204 9.07957 11.6666 10 11.6666Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linejoin="round" />
                                </svg>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <p class="mt_p">
                                <el-link :href="scope.row.material_logo" :underline="false" type="primary" target="_blank" v-if="scope.row.material_logo_status==1">下载有水印</el-link>
                                <el-link :underline="false" type="info" disabled v-else>水印生成中...</el-link>
                            </p>
                            <p class="mt_p">
                                <el-link :href="scope.row.material" :underline="false" type="primary" target="_blank">下载无水印</el-link>
                            </p>
                            <p class="mt_p">
                                <el-dropdown placement='bottom'>
                                    <el-link :underline="false" type="primary"><i class="el-icon-more"></i></el-link>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="addMaterialTag(scope.row,1)">
                                            <div class="drop_item flexbox flexcenter">
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M17.5724 10.5788C17.7481 10.7545 17.7481 11.0394 17.5724 11.2152L11.2152 17.5724C11.0394 17.7481 10.7545 17.7481 10.5788 17.5724L3.43471 10.4283C3.34972 10.3433 3.30226 10.2279 3.30292 10.1077L3.33771 3.78512C3.33906 3.53852 3.53863 3.33895 3.78523 3.3376L10.1077 3.30291C10.2279 3.30225 10.3433 3.34971 10.4283 3.43471L17.5724 10.5788Z" stroke="#616C85" stroke-width="1.6" />
                                                    <path d="M7.5 9C6.67157 9 6 8.32843 6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5C9 8.32843 8.32843 9 7.5 9Z" fill="#616C85" />
                                                </svg>
                                                <span class="drop_title">标签设置</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native="addCaShen(scope.row)">
                                            <div class="drop_item flexbox">
                                                <img src="../../assets/img/cashen_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">卡审原因</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native="viewDamaInfo(scope.row)" v-if="scope.row.description">
                                            <div class="drop_item flexbox">
                                                <img src="../../assets/img/dama_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">需求信息</span>
                                            </div>
                                        </el-dropdown-item>
                                        <!-- <el-dropdown-item @click.native="deletVideo(scope.row.id)">
                                            <div class="drop_item flexbox">
                                                <img src="../../assets/img/del_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">删除</span>
                                            </div>
                                        </el-dropdown-item> -->
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="flex over_box source_box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" style="display:none">
                <el-table :data="tableData" class="com_table source_table" :key="tableKey" height="100%" ref="mtTables" @sort-change='sortChange'>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="campaign_name" label="素材" width="375" fixed="left">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <div class="source_video" @click="playVideo(scope.row.material)">
                                    <el-tag effect="dark" size="mini" class="source_tyle" v-if="scope.row.material_type==1">自制</el-tag>
                                    <el-tag effect="dark" size="mini" type="success" class="source_tyle" v-else>外部</el-tag>
                                    <div class="source_cashen flexbox flexjust flexcenter" v-if="scope.row.reject==1">审核<br />不通过</div>
                                    <img :src="scope.row.material+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" class="source_img">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="source_play">
                                        <ellipse opacity="0.4" cx="12" cy="12" rx="12" ry="12" fill="black" />
                                        <path d="M17.6411 11.5965C17.9607 11.8312 17.9607 12.3087 17.6411 12.5434L9.93513 18.2031C9.54719 18.488 9.00003 18.211 9.00003 17.7297L9.00003 6.41022C9.00003 5.92889 9.54719 5.65187 9.93513 5.93679L17.6411 11.5965Z" fill="white" />
                                    </svg>
                                </div>
                                <div class="source_info flex">
                                    <template v-if="scope.row.area==1">
                                        <el-tooltip content="" placement="top">
                                            <div slot="content" class="flexbox flexcenter font_14">
                                                核心创意人：{{scope.row.director_name}}
                                                <span class="mt_line"></span>
                                                拍摄：{{scope.row.photographer_name}}
                                                <span class="mt_line"></span>
                                                剪辑：{{scope.row.editor_name}}
                                            </div>
                                            <div class="source_name">{{scope.row.material_name}}</div>
                                        </el-tooltip>
                                    </template>
                                    <template v-else-if="scope.row.area==2">
                                        <el-tooltip content="" placement="top">
                                            <div slot="content" class="flexbox flexcenter font_14">
                                                编导：{{scope.row.director_name}}
                                                <span class="mt_line"></span>
                                                拍摄：{{scope.row.photographer_name}}
                                                <span class="mt_line"></span>
                                                剪辑：{{scope.row.editor_name}}
                                            </div>
                                            <div class="source_name">{{scope.row.material_name}}</div>
                                        </el-tooltip>
                                    </template>
                                    <div class="source_tag">{{scope.row.tag.length>0?scope.row.tag.map((item=>{return item.name})).join('/'):'暂无标签'}}</div>
                                    <div class="source_text">ID：{{scope.row.material_id==0?'无':scope.row.material_id}}</div>
                                    <div class="source_text">{{scope.row.create_time}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="消耗" min-width="125" sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.stat_cost?scope.row.stat_cost:0}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="show_cnt" label="展示" min-width="125" sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.show_cnt?scope.row.show_cnt:0}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="click_rate" label="点击率" min-width="125" sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.click_rate?scope.row.click_rate:0}}%
                        </template>
                    </el-table-column>
                    <el-table-column prop="pay_order_roi" label="支付ROI" min-width="125" sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.pay_order_roi?scope.row.pay_order_roi:0}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" width="130" fixed="right">
                        <template slot-scope="scope">
                            <p class="mt_p">
                                <el-link :href="scope.row.material_logo" :underline="false" type="primary" target="_blank" v-if="scope.row.material_logo_status==1">下载有水印</el-link>
                                <el-link :underline="false" type="info" disabled v-else>水印生成中...</el-link>
                            </p>
                            <p class="mt_p">
                                <el-link :href="scope.row.material" :underline="false" type="primary" target="_blank">下载无水印</el-link>
                            </p>
                            <p class="mt_p">
                                <el-dropdown placement='bottom'>
                                    <el-link :underline="false" type="primary"><i class="el-icon-more"></i></el-link>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="addMaterialTag(scope.row,1)">
                                            <div class="drop_item flexbox flexcenter">
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M17.5724 10.5788C17.7481 10.7545 17.7481 11.0394 17.5724 11.2152L11.2152 17.5724C11.0394 17.7481 10.7545 17.7481 10.5788 17.5724L3.43471 10.4283C3.34972 10.3433 3.30226 10.2279 3.30292 10.1077L3.33771 3.78512C3.33906 3.53852 3.53863 3.33895 3.78523 3.3376L10.1077 3.30291C10.2279 3.30225 10.3433 3.34971 10.4283 3.43471L17.5724 10.5788Z" stroke="#616C85" stroke-width="1.6" />
                                                    <path d="M7.5 9C6.67157 9 6 8.32843 6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5C9 8.32843 8.32843 9 7.5 9Z" fill="#616C85" />
                                                </svg>
                                                <span class="drop_title">标签设置</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native="addCaShen(scope.row)">
                                            <div class="drop_item flexbox">
                                                <img src="../../assets/img/cashen_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">卡审原因</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native="viewDamaInfo(scope.row)" v-if="scope.row.description">
                                            <div class="drop_item flexbox">
                                                <img src="../../assets/img/dama_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">需求信息</span>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </div> -->
            <div class="page_box flexbox flexcenter" v-if="total>20">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { businessList } from "../../assets/js/scheduling";
import {
    jlHead,
    qcHead,
    cashenList,
    durationList,
    addrank,
    areaList,
    sourceList,
} from "../../assets/js/material";
import PlayVideo from "./PlayVideo";
import AddMtVideo from "./AddMtVideo";
import AddMaterialTag from "./AddMaterialTag";
import AddCaShen from "./AddCaShen";
import ViewDamaInfo from "./ViewDamaInfo";
import SetHeader from "./SetHeader";
import MaterialVersion from "./MaterialVersion";
import ViewAnalysis from "./ViewAnalysis";
export default {
    name: "",
    data() {
        return {
            qc_table_head: [],
            jl_table_head: [],
            pickerOptions: {
                disabledDate(time) {
                    let dateTime = new Date();
                    let nowTime =
                        dateTime.getHours() * 60 + dateTime.getMinutes();
                    if (nowTime > 740) {
                        return time.getTime() > Date.now() - 8.64e7;
                    } else {
                        return time.getTime() > Date.now() - 8.64e7 - 8.64e7;
                    }
                },
            },
            dataType:1,
            tableKey: Math.random(),
            tableHeader: [],
            currActive: 1,
            currFun: -1,
            loading: false,
            m_loading: false,
            isOpen: [0],
            showrank: true,
            down_loadding: false,
            catalogQuery: "",
            dirQuery: "",
            editQuery: "",
            phoQuery: "",
            currentNodekey: 0, //默认选中的节点树
            catalogData: [], //目录列表
            duration_text: [], //已选时长
            cashen_text: [], //已选状态
            duration_val: "",
            size_val: [],
            tag_list: [],
            tag_text: [],
            tagQuery: "",
            roleList: [],
            sizeList: [],
            size_text: [],
            catalogueInfo: {
                channel: 1,
                soure_type: 1,
            },
            queryInfo: {
                duration: [],
                size: [],
                page: 1,
                limit: 20,
                query: "",
                date: [],
                cate_id: "",
                field: "create_time",
                order: "",
                channel: 1,
                tag: [],
                reject: "",
                area: 0,
                need_order_field: "",
                need_order_type: "",
                need_field: [],
                need_date: [],
                id: [],
                business_scene: [],
                material_type: "",
                director_uid: "",
                editor_uid: [],
                photographer_uid: "",
                brand_name: "",
                product_name: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
            defaultProps: {
                children: "next",
                label: "name",
            },
            cashenList: [],
            durationList: [],
            addrank: [],
            businessList: [],
            areaList: [],
            sourceList: [],
        };
    },
    created() {
        this.businessList = businessList;
        this.cashenList = cashenList;
        this.durationList = durationList;
        this.addrank = addrank;
        this.areaList = areaList;
        this.sourceList = sourceList;
        this.getCatalogueList();
        this.getSizeList();
        this.getTagList();
        // this.getDataList(1);
        this.getTableHeader();
        this.getRoleList();
    },
    methods: {
        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        repeatSinge(a, b, id, name) {
            let text = a
                .filter((item) => {
                    return item[id] == b;
                })
                .map((item) => {
                    return item[name];
                })
                .toString();
            return text;
        },
        // tab切换
        changeCatalogue(index) {
            this.currActive = index;
            this.catalogueInfo.channel = index;
            this.queryInfo.cate_id = "";
            this.queryInfo.channel = index;
            this.queryInfo.need_order_field = "";
            this.queryInfo.need_order_type = "";
            this.dataType = 1
            this.$refs.mtTable.clearSort();
            this.getCatalogueList();
            if (index == 1 || index == 3) {
                this.getTableHeader();
            } else {
                this.getDataList(1);
            }
        },

        // 树形节点点击
        getTreeData(data) {
            if (data.next.length == 0) {
                this.queryInfo.cate_id = data.id;
                this.getDataList(1);
            }
        },

        setHeader() {
            this.$refs.headRef.getParentData(
                true,
                this.tableHeader,
                this.queryInfo.channel,
                this.qc_table_head,
                this.jl_table_head
            );
        },

        //获取员工列表
        async getRoleList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/findDEPList",
                {
                    query: "",
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.roleList = res.data;
            }
        },

        // 获取表头数据
        async getTableHeader() {
            this.tableHeader = [];
            const { data: res } = await this.$http.post(
                "adminapi/material/materialTableGet"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                if (this.queryInfo.channel == 1) {
                    if (
                        res.data.material_field &&
                        res.data.material_field.hasOwnProperty("qc_head") &&
                        res.data.material_field.qc_head.length > 0
                    ) {
                        this.tableHeader = this.qc_table_head = this.assignArr(
                            qcHead,
                            res.data.material_field.qc_head
                        );
                        this.queryInfo.need_field =
                            res.data.material_field.qc_head
                                .filter((item) => {
                                    return item.is_show == 1;
                                })
                                .map((val) => {
                                    return val.prop;
                                });
                    }
                } else if (this.queryInfo.channel == 3) {
                    if (
                        res.data.material_field &&
                        res.data.material_field.hasOwnProperty("jl_head") &&
                        res.data.material_field.jl_head.length > 0
                    ) {
                        this.tableHeader = this.jl_table_head = this.assignArr(
                            jlHead,
                            res.data.material_field.jl_head
                        );
                        this.queryInfo.need_field =
                            res.data.material_field.jl_head
                                .filter((item) => {
                                    return item.is_show == 1;
                                })
                                .map((val) => {
                                    return val.prop;
                                });
                    }
                }

                this.tableKey = Math.random();
                this.getDataList(1);
            }
        },

        // 数组去重
        assignArr(arr2, arr1) {
            for (var i = 0; i < arr2.length; i++) {
                var flag = false;
                for (var k = 0; k < arr1.length; k++) {
                    if (arr2[i].prop === arr1[k].prop) {
                        flag = true;
                        break;
                    }
                }
                if (!flag) {
                    arr1.push(arr2[i]);
                }
            }
            return arr1;
        },

        // 数据源切换
        swicthData(){

        },

        //获取数据列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            let link = ""
            if (this.queryInfo.channel == 1) {
                if (this.dataType == 0) {
                    link = 'adminapi/material/materialList'
                } else {
                    link = 'adminapi/material/materialListQc'
                }
            } else if (this.queryInfo.channel == 3) {
                link = 'adminapi/material/materialList'
            } else {
                link = 'adminapi/material/materialListUd'
            }
            var { data: res } = await this.$http.post(
                link,
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.$refs.mtTable.doLayout();
                // if (
                //     this.queryInfo.channel == 1 ||
                //     this.queryInfo.channel == 3
                // ) {
                //     this.$refs.mtTable.doLayout();
                // }
            }
        },

        //旧数据导出表格
        async downloadFile() {
            this.down_loadding = true;
            const { data: res } = await this.$http.post(
                "export/DownloadTtask/task_add",
                {
                    name: "",
                    date: this.queryInfo.date,
                    need_date: this.queryInfo.need_date,
                    channel: this.queryInfo.channel,
                    query: this.queryInfo.query,
                    business_scene: this.queryInfo.business_scene,
                    director_uid: this.queryInfo.director_uid,
                    editor_uid: this.queryInfo.editor_uid,
                    photographer_uid: this.queryInfo.photographer_uid,
                    brand_name: this.queryInfo.brand_name,
                    product_name: this.queryInfo.product_name,
                    material_type: this.queryInfo.material_type,
                    area: this.queryInfo.area,
                    reject:this.queryInfo.reject,
                    tag:this.queryInfo.tag,
                    duration:this.queryInfo.duration,
                    size:this.queryInfo.size,
                }
            );

            if (res.code !== 200) {
                this.down_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.down_loadding = false;
                this.$message({
                    type: "success",
                    message: "导出成功，请前往任务中心下载!",
                });
            }
        },

        //新数据导出表格
        async downloadNewsFile() {
            this.queryInfo.types=1
            const { data: res } = await this.$http.post(
                "adminapi/material/materialListQc",
                this.queryInfo
            );

            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    type: "success",
                    message: "导出成功，请前往任务中心下载!",
                });
            }
        },

        //获取目录列表
        async getCatalogueList() {
            this.m_loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/material/catalog",
                this.catalogueInfo
            );
            if (res.code !== 200) {
                this.m_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.m_loading = false;
                let arrText = {
                    brand_id: "",
                    name: "全部",
                    next: [],
                };
                if (res.data.length > 0) {
                    res.data.unshift(arrText);
                }
                this.catalogData = res.data;
            }
        },

        //获取尺寸列表
        async getSizeList() {
            const { data: res } = await this.$http.post(
                "adminapi/material/materialQuality"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data) {
                    res.data[i].id = i;
                    res.data[i].nickname =
                        res.data[i].width + "x" + res.data[i].height;
                }
                this.sizeList = res.data;
            }
        },

        //获取标签列表
        async getTagList() {
            const { data: res } = await this.$http.post(
                "adminapi/material/tagList",
                {
                    page: 1,
                    limit: 0,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.tag_list = res.data.list;
            }
        },

        addCaShen(item) {
            const attr = {
                dialogVsb: true,
                material_id: item.id,
                reject_reason: item.reject_reason,
                reject: item.reject,
            };
            this.$bus.emit("addCaShen", attr);
        },

        // 删除视频
        deletVideo(id) {
            this.$confirm("是否要删除该视频?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/material/materialDelete",
                        {
                            material_id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        playVideo(url) {
            const attr = {
                dialogVsb: true,
                url: url,
            };
            this.$bus.emit("playVideo", attr);
        },

        // 上传素材
        addMtVedio() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addMtVedio", attr);
        },

        // 添加标签
        addMaterialTag(item, type) {
            this.$refs.addTag.dialogVisible = true;
            this.$refs.addTag.addMaterialTagForm.id = item.id;
            this.$refs.addTag.addMaterialTagForm.source_type = type;
            this.$refs.addTag.addMaterialTagForm.tag = item.tag.map((it) => {
                return it.id;
            });
            this.$refs.addTag.has_tag = JSON.parse(JSON.stringify(item.tag));
        },

        // 查看需求信息
        viewDamaInfo(info) {
            const attr = {
                dialogVsb: true,
                description: info.description,
                name: info.material_name,
            };
            this.$bus.emit("viewDamaInfo", attr);
        },

        // 尺寸筛选
        selectText() {
            let arr = [];
            let old = this.sizeList;
            let news = this.size_val;
            for (let i in old) {
                for (let a in news) {
                    if (old[i].id == news[a]) {
                        arr.push(old[i]);
                    }
                }
            }
            this.size_text = arr.map((item) => {
                return item.nickname;
            });
            this.queryInfo.size = arr;
            this.getDataList(1);
        },

        // 筛选
        selectText2(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                id.forEach((val) => {
                    if (element.id == val) {
                        has_checked.push(element[name]);
                    }
                });
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 时长筛选
        changeDuration() {
            let val = this.durationList.filter((item) => {
                if (item.id == this.duration_val) {
                    return item;
                }
            });
            let s =
                val[0].id == 4 ? [val[0].start] : [val[0].start, val[0].end];
            this.duration_text = [val[0].nickname];
            this.queryInfo.duration = s;
            this.getDataList(1);
        },

        changeStatus(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                if (element.id == id) {
                    has_checked = [element[name]];
                }
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 清除已选
        clearFilter(text, id, val) {
            this.queryInfo[id] = [];
            this[text] = [];
            if (val == "duration_val") {
                this[val] = "";
            } else {
                this[val] = [];
            }
            this.getDataList(1);
        },

        // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        // 筛选
        filterRank(query, list, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item[name].indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        // 素材版本
        materialVersion(row) {
            let info = {
                material_name: row.material_name,
                tag: row.tag,
                material_id: row.material_id,
                create_time: row.create_time,
                version_type: row.version_type,
            };
            this.$refs.versionRef.dialogVisible = true;
            this.$refs.versionRef.curInfo = info;
            this.$refs.versionRef.getRecordList(row.id);
        },

        // 版本查找
        getVersion(val) {
            this.queryInfo.id = val;
            this.queryInfo.duration = [];
            this.queryInfo.size = [];
            this.queryInfo.query = "";
            this.queryInfo.date = [];
            this.queryInfo.order = "";
            this.queryInfo.reject = "";
            this.queryInfo.need_order_field = "";
            this.queryInfo.need_order_type = "";
            this.queryInfo.tag = [];
            this.queryInfo.need_date = [];
            this.getDataList(1);
        },

        // 关闭原需求
        tagClose() {
            this.queryInfo.id = [];
            this.getDataList(1);
        },

        // 跳转到任务列表
        toLoadTask() {
            this.$router.push("/loadtask");
        },

        // 跳转到数据中心
        toVideoCount() {
            this.$router.push("/videocount");
        },

        // 重置
        resetScreen() {
            this.cashen_text = [];
            this.duration_text = [];
            this.duration_val = "";
            this.size_val = [];
            this.size_text = [];
            this.queryInfo.duration = [];
            this.queryInfo.size = [];
            this.queryInfo.query = "";
            this.queryInfo.date = [];
            this.queryInfo.order = "";
            this.queryInfo.reject = "";
            this.queryInfo.need_order_field = "";
            this.queryInfo.need_order_type = "";
            this.tag_text = [];
            this.queryInfo.tag = [];
            this.queryInfo.need_date = [];
            this.queryInfo.id = [];
            this.queryInfo.business_scene = [];
            this.queryInfo.material_type = [];
            this.queryInfo.director_uid = "";
            this.queryInfo.editor_uid = "";
            this.queryInfo.photographer_uid = "";
            this.queryInfo.brand_name = "";
            this.queryInfo.product_name = "";
            this.$refs.mtTable.clearSort();
            this.getDataList(1);
            this.addrank.map((item) => {
                return (item.check = false);
            });
        },

        // 表格排序
        sortChange(column) {
            this.queryInfo.need_order_type = "";
            this.queryInfo.need_order_field = "";
            if (!column.order) {
                this.getDataList(this.setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.need_order_type = order;
            this.queryInfo.need_order_field = column.prop;
            this.getDataList(1);
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.queryInfo[name] = [];
            } else {
                this.queryInfo[name] = "";
            }
            this.getDataList(1);
        },

        // 删除筛选
        deletRank(index, name, type) {
            this.addrank[index].check = false;
            if (index == 0) {
                this.duration_text = [];
                this.duration_val = "";
            } else if (index == 2) {
                this.size_text = [];
                this.size_val = [];
            }
            if (type == 1) {
                this.queryInfo[name] = [];
            } else {
                this.queryInfo[name] = "";
            }
            this.getDataList(1);
        },

        changeRank(item, index) {
            if (!item.check) {
                if (index == 0) {
                    this.duration_text = [];
                    this.duration_val = "";
                } else if (index == 2) {
                    this.size_text = [];
                    this.size_val = [];
                }
                if (item.type == 1) {
                    this.queryInfo[item.value] = [];
                } else {
                    this.queryInfo[item.value] = "";
                }
                this.getDataList(1);
            }
        },

        // 时间排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        PlayVideo,
        AddMtVideo,
        AddMaterialTag,
        AddCaShen,
        ViewDamaInfo,
        SetHeader,
        MaterialVersion,
        ViewAnalysis
    },
};
</script>


<style scoped>
.sch_hight {
    flex-wrap: wrap;
}
.reset_btn {
    margin-left: 0;
}
.load_btn {
    cursor: pointer;
}
.person_left {
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid #ebebeb;
}
.person_right {
    flex: 1;
    overflow: auto;
}
.mr_header {
    padding: 0 20px;
    border-bottom: 1px solid #ebebeb;
    height: 69px;
}
.person_header {
    /* padding: 0 20px; */
    height: 69px;
    border-bottom: 1px solid #ebebeb;
}
.person_title {
    font-size: 16px;
    font-weight: bold;
}

.person_center {
    padding: 20px 20px 0;
    overflow-y: auto;
}

.person_job {
    overflow-y: auto;
}

.per_tab {
    justify-content: center;
}
.per_tab li {
    height: 69px;
    line-height: 69px;
    padding: 0 10px;
    position: relative;
    font-size: 16px;
    color: #616c85;
    cursor: pointer;
}
.per_tab li::after {
    transform: scaleX(0);
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-top: 2px solid #4475ff;
    transition: all 0.3s;
}
.per_tab li.active {
    color: #17233d;
}
.per_tab li.active::after {
    transform: scaleX(1);
}

.person_btn {
    padding: 20px;
}
.custom-tree-node {
    height: 48px;
}
.tree_title {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
}
.part_right {
    position: absolute;
    right: 10px;
    display: none;
}

.mt_border {
    border-bottom: 1px solid #ebebeb;
}
.source_video {
    width: 80px;
    height: 126px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}
.source_img {
    display: block;
    width: 80px;
    height: 126px;
}
.source_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.source_cashen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    font-size: 14px;
    color: #fe6262;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
}
.source_info {
    margin-left: 12px;
    height: 126px;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    padding: 12px;
    border-radius: 2px;
}
.source_name {
    font-size: 13px;
    line-height: 18px;
    height: 36px;
    color: #17233d;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.source_tag {
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    color: #616c85;
}
.source_text {
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    color: #b4b7bd;
}
.mt_p {
    margin: 10px 0;
}
.set_svg {
    cursor: pointer;
}
.source_box {
    padding: 20px 20px 0;
}
.source_tyle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    border-radius: 0px 2px;
}
.parent_num {
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    background: rgba(165, 177, 209, 0.08) !important;
    border-radius: 2px;
    border: 1px solid rgba(165, 177, 209, 0.08) !important;
    color: #4475ff !important;
}
.circle_mt {
    width: 4px;
    height: 4px;
    background-color: #616c85;
    border-radius: 50%;
}
</style>

<style>
.source_table.com_table.el-table th {
    padding: 3px 0;
}
.source_table .el-table__body tr.hover-row > td {
    background-color: unset !important;
}
.part_tree .el-tree-node__content {
    height: 48px;
    position: relative;
}
.part_tree .el-tree-node__expand-icon {
    color: #616c85;
    margin-left: 15px;
}
.part_tree .el-tree-node__expand-icon.is-leaf {
    color: transparent;
}
.part_tree .el-tree-node__content:hover {
    background-color: #f6f8ff;
}
.source_table .el-table__fixed-right::before,
.source_table .el-table__fixed::before {
    display: none;
}
.is_me .el-radio-button--mini .el-radio-button__inner {
    padding: 5px 15px;
}
</style>


